<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音频动态控制</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="../styles/common.css"/>
    <link rel="stylesheet" href="../../styles/page.css"/>
    <link rel="stylesheet" href="../../css/currency.css">
    <link rel="stylesheet" href="../../css/optgroups.css">

    <style>
        /* 音乐播放和暂停 */
        img#musicPattern {
            animation-name: musicPattern; /* 这个名称是下方的动画名称 */
            animation-timing-function: linear; /* linear代表均速旋转 */
            animation-duration: 5s; /* 5秒旋转完一圈 */
            animation-iteration-count: infinite; /* 旋转次数无限制 */
        }

        /* 实现动画的旋转 */
        @keyframes musicPattern {
            0% {
                transform: rotate(0deg);
            }
            50% {
                transform: rotate(180deg);
            }
            100% {
                transform: rotate(365deg);
            }
        }

    </style>

</head>
<body style="background-color: white;">

<!-- 音频导入 -->
<audio
        id="music"
        controlsList="nodownload"
        autoplay="autoplay"
        loop="loop"
        title="此音频已获得授权"
>
    <source src="/mhys/audio/cesuan" type="audio/mp3">
    <source src="/mhys/audio/cesuan" type="audio/ogg">

    <embed height="10" width="10" src="/mhys/audio/cesuan">

</audio>

<!-- 音乐图标导入，并设置id -->
<!--<img id="musicPattern" onclick="musics()" src="../imgs/music_png.png" width="50px" alt="图片资源加载失败" title="点击一下">-->
<img id="musicPattern" onclick="musics()" src="../../imgs/music_svg.svg" width="50px" alt="图片资源加载失败" title="播放/暂停">

</body>

<script>

    // 动画旋转
    var music = document.getElementById('music')    // 获取音乐
    var musicPattern = document.getElementById('musicPattern')   // 获取音乐图标
    var tem = true  // 设置一个变量，用来控制音乐是否在播放。

    //定义一个函数，当用户单击的时候触发这个函数，从而实现音乐的暂停与播放。
    function musics() {
        // tem用来控制音乐当前是否在播放。true代表音乐正在播放，false代表音乐当前正在处于暂停的状态。
        if (tem === false) {
            music.play()  // 播放音乐
            tem = true
            document.getElementById('musicPattern').style.animationPlayState = 'running'  // 播放音乐图标
        } else {
            music.pause()  // 暂停音乐
            tem = false
            document.getElementById('musicPattern').style.animationPlayState = 'paused'  // 暂停音乐图标
        }
    }


</script>


</html>